import React, { useState,useEffect } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import * as Animatable from 'react-native-animatable';

// 定义基本组件
const View01 = () => {
  return (
    <View style={styles.box1}>
      <View style={styles.innerBox} />
      <View style={styles.innerBox2} />
    </View>
  );
};

export const Test4001 = () => {
  const [animationTriggered, setAnimationTriggered] = useState(false);

  // 处理按钮点击，触发平移动画
  const handleMove = () => {
    setAnimationTriggered((prevState) => !prevState); // 切换动画状态
  };

  useEffect(() => {
    if (animationTriggered) {
      // 这里可以放入动画开始时的额外逻辑
      console.log('动画已触发');
    } else{
      console.log('动画已触发1');
      setAnimationTriggered(true)
    }
  }, [animationTriggered]); // 监听 animationTriggered 状态

  return (
    <View style={styles.container}>
         <Button title="zoom In Left" onPress={handleMove} />
      <View style={styles.container1}>
      <Animatable.View
 animation={ animationTriggered ? "zoomInLeft":undefined }

        duration={2000} // 动画时长
        style={[styles.box1]} // 平移动画
      >
<View01></View01>
      </Animatable.View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  container1: {
    height: 200,
    width: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },

  box1: {
    backgroundColor: 'gold',
    borderRadius: 6,
    width:200,
    height:200,
    alignItems:"center",
    justifyContent:"center",
  },

  innerBox: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  innerBox2: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
});

